const arr = [{
    title: "谢谢惠顾",
    img: "imgs/img5.png",
    p: 0.2
},
{
    title: "京东10代金券",
    img: "imgs/img1.png",
    p: 0.2
},
{
    title: "京东20代金券",
    img: "imgs/img2.png",
    p: 0.1
}, {
    title: "京东50代金券",
    img: "imgs/img3.png",
    p: 0.1
},
{
    title: "京东100代金券",
    img: "imgs/img4.png",
    p: 0.1
},
{
    title: "京东200代金券",
    img: "imgs/img6.png",
    p: 0.1
}, {
    title: "京东500代金券",
    img: "imgs/img7.png",
    p: 0.1
}, {
    title: "IPHONE13",
    img: "imgs/img8.png",
    p: 0.1
}
];

$(function () {
arr.forEach((item, i) => {
    $('.zp .circle').append(`
    <div class="item">
    <div class="content">
        <div class="title">${item.title}</div>
        <img src="${item.img}" alt="">
    </div>
</div>
    `)
})

let luckyNum;
$('.zp .circle').on('transitionend', function () {
    if (luckyNum >= 0) {
        alert('您抽中的是：' + arr[luckyNum].title);
        luckyNum = null;
    }
})

$('.zp .btn').click(function () {
    $('.zp .circle').css({
        'transform': 'rotate(0deg)',
        transition: 'none'
    })

    setTimeout(() => {
        // 随机出0-1的数
        let randomNum = Math.random();
        let current = 0;
        luckyNum = 0;
        for (let i = 0; i < arr.length; i++) {
            current += arr[i].p
            if (randomNum < current) {
                luckyNum = i;
                break;
            }
        }
        let rotateDeg = -(360 * 5 + (luckyNum * 45) + 22.5);

        $('.zp .circle').css({
            transition: 'all 3s ease-in-out',
            'transform': `rotate(${rotateDeg}deg)`
        })
    }, 0)
})
})